<template>
  <div class="box-fillIn">
    <el-card>
      <el-steps
        :active="active"
        finish-status="success"
        align-center
        style="position: relative; z-index: 0"
      >
        <el-step title="基础信息" />
        <el-step title="附件信息" />
        <el-step title="出让公告" />
        <el-step title="出让须知" />
      </el-steps>
      <!-- <el-button style="margin-top: 12px" @click="next">Next step</el-button> -->
    </el-card>
    <!-- 填写内容区 -->
    <el-card class="fillIn-card">
      <!-- keep-alive 包裹的组件将会被缓存！即B组件中更改内容，切换回A组件页面，
            再切换回B组件，是之前缓存的状态，而不是生成了新的B组件实例-->
      <!-- <essentialInformation></essentialInformation> -->
      <keep-alive>
        <component :is="dom[active]" ref="refModule"></component>
      </keep-alive>
      <div class="btn-group">
        <el-button type="primary" v-if="active != 0" @click="back"
          >上一步</el-button
        >
        <el-button type="primary" @click="next" v-if="!(active == 3)"
          >下一步</el-button
        >
        <el-button type="primary" @click="cliSave">保存</el-button>
        <el-button>返回</el-button>
      </div>
    </el-card>
  </div>
  <!-- 基本预览页面弹框 -->
  <el-dialog v-model="dialogVisible" title="预览详情" :fullscreen="true">
    <el-tabs type="border-card">
      <el-tab-pane label="矿产品信息">
        <div class="height-65Vh">
          <!--基本信息 -->
          <basicPreview></basicPreview>
        </div>
      </el-tab-pane>
      <!-- 出价记录组件 -->
      <!-- <el-tab-pane label="出价记录">
        <div class="height-65Vh">
       
          <recordOfBid></recordOfBid>
        </div>
      </el-tab-pane> -->
      <el-tab-pane label="出让公告">
        <div class="height-65Vh">
          <div v-html="htmlStr"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="出让须知">
        <div class="height-65Vh">321</div>
      </el-tab-pane>
      <el-tab-pane label="矿区现场图">
        <el-carousel :interval="4000" type="card" height="60vh">
          <el-carousel-item v-for="item in 6" :key="item">
            <h3 text="2xl" justify="center">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </el-tab-pane>
      <el-tab-pane label="附件信息">
        <div class="height-65Vh">
          <attachmentInformation></attachmentInformation>
        </div>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">返回</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  markRaw,
  shallowRef,
  onMounted,
  onBeforeUnmount,
  computed,
  getCurrentInstance,
  ComponentInternalInstance, // 全局事件总线
} from "vue";

import axios from "axios";

// 引入自定义请求库
import { postAction } from "@/utils/system/commonUse";
import { ElMessageBox, ElMessage } from "element-plus";

// 填写信息
import essentialInformation from "./modules/essentialInformation/index.vue";
// 上传 附件
import accessory from "./modules/accessory/index.vue";
// 文本编辑
import wangEditor from "./modules/wangEditor/index.vue";
// 出让须知
import toSellNotice from "./modules/toSellNotice/index.vue";

// =========================================预览详情组件========================================================================
import recordOfBid from "./preview/recordOfBid/index.vue";
// 基本信息 预览
import basicPreview from "./preview/basicPreview/index.vue";
// 附件信息 预览
import attachmentInformation from "./preview/attachmentInformation/index.vue";
import { json } from "stream/consumers";
import { objectToString } from "@vue/shared";
// import wordEditor from "@/views/main/components/wordEditor/index.vue";
// import tinymce from "@/components/tinymce/index.vue";

//获取bus 实例
const { appContext } = getCurrentInstance() as ComponentInternalInstance;
// 步骤条
const active = ref(0);
// 渲染那个组件
let dom = shallowRef([
  essentialInformation,
  accessory,
  wangEditor,
  toSellNotice,
]);

// 上一步
const back = () => {
  active.value = active.value - 1;
};
// 下一步
const next = () => {
  if (active.value++ >= 3) active.value = 0;

  console.log("active.value", active.value);
};
// 弹框
const dialogVisible = ref(false);
// 服务器地址
const url = reactive({
  saveUrl: "/project/saveOrUpdate",
  getList: "/project/getById",
});
const getList1 = (list: any) => {
  console.log(list);
};

const refModule = ref();
// 单击保存 预览
const cliSave = () => {
  console.log("refModule.value", refModule.value);

  let obj = reactive({});
  // 判断为第几步骤
  switch (active.value) {
    // 第一步详情信息
    case 0:
      obj = refModule.value.form;
      break;
    case 1:
      break;
    case 2:
      console.log(
        "Object.assign({ announcementTransfer: refModule.value.valueHtml }, obj)",
        Object.assign(obj, { announcementTransfer: refModule.value.valueHtml })
      );

      Object.assign({ announcementTransfer: refModule.value.valueHtml }, obj);
      break;
    case 3:
      Object.assign(obj, { noticeTransfer: refModule.value.valueHtml });
      break;
  }

  postAction(`${url.saveUrl}`, {
    id: sessionStorage.getItem("id"),
    ...obj,
  })
    .then((data: any) => {
      console.log("data===>", data);
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      ElMessage.success(data.msg);
    })
    .catch((err) => {
      console.log(err);
      ElMessage.error("表格数据获取失败");
    });
  if (active.value >= 3) {
    dialogVisible.value = true;
  }
  console.log("active==>后", active);
};

const htmlStr = ref("");
// 8111/project/queryProjecById
onMounted(() => {
  // axios({
  //   // url: "http://192.168.5.175:8111/project/generateProjectId",
  //   url: "http://192.168.176.73:8111/project/queryProjecById/1603935772673626113",
  // })
  //   .then(({ data }) => {
  //     console.log(data);
  //     htmlStr.value = data.data.noticeTransfer;
  //   })
  //   .catch((err) => {
  //     console.log(err);
  //   });
  postAction(`${url.getList}/${sessionStorage.getItem("id")}`)
    .then((data: any) => {
      console.log("data===>", data);
      // if (data.code != 1000) {
      //   return ElMessage.error(data.msg);
      // }
      // ElMessage.success(data.msg);
    })
    .catch((err) => {
      console.log(err);
      // ElMessage.error("表格数据获取失败");
    });
  // 8111/project/queryProjectById/
});
</script>

<style lang="scss" scoped>
.btn-group {
  display: flex;
  justify-content: flex-end;
  margin: 3% 0 0 0;
}
.height-65Vh {
  height: 65vh;
  overflow: auto;
}
// =================轮播样式 后面删除掉=======================
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
